.et-dynamic-query-field {
  position: relative;

  .dropdown-pane {
    width: 100%;
    padding: 0 0.5rem;
    max-height: 10.5rem;
    overflow-y: auto;

    li {
      position: relative;

      &:after {
        content: ' ';
        border: 0.5px dotted $medium-gray;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }

      &:last-child:after {
        content: none;
      }

      a {
        padding: 0.6875rem 0.5rem;
        font-size: .875rem;
        color: $black;

        &:hover {
          background-color: $et-light-gray;
        }
      }

      span {
        padding: 0 0.5rem;
        font-size: .875rem;
        display: inline-block;
        line-height: 2.25rem;
      }
    }
  } // END dropdown-pane

  .loader-wrapper {
    width: 2.25rem;
    height: 2.25rem;
    position: absolute;
    right: 0;

    .loader {
      position: absolute;
      border: 0.1875rem solid rgba($primary-color, 0.2);
      border-left: 0.1875rem solid $primary-color;
      transform: translateZ(0);
      animation: fieldLoader 1.1s infinite linear;
      right: 0.5rem;
      top: 0.5rem;

      &, &:after {
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  } // END loader-wrapper

  .clear-btn {
    position: absolute;
    right: 0.5rem;
    bottom: 0;
    color: $et-dark-gray;

    i {
      font-size: 1.275rem;
    }
  }
} // END dynamic-query-field

@keyframes fieldLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
